<template>
  <div class="GHBJ_Map">
    <transition name="fade" mode="out-in">
      <component :is="component" :statistic-data="statisticData"></component>
    </transition>
    <el-dialog v-model="isDia" :title="title()" width="84%" @close="onClose">
      <component :is="componentDia"></component>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import useMapStore from '@/store/modules/map';
const NYSC = defineAsyncComponent(() => import('./NYSC.vue'));
const JYZT = defineAsyncComponent(() => import('./JYZT.vue'));
const CYFC = defineAsyncComponent(() => import('./CYFC.vue'));
const dialogTableVisible = ref(false);
const mapStore = useMapStore();
const isDia = computed(() => {
  return mapStore.isDia;
});
const component = computed(() => {
  return NYSC;
});
const title = () => {
  // console.log('mapStore.activeTab', mapStore.activeTab);
  if (mapStore.activeTab == 'yjzt') {
    return '经营主体';
  }
  if (mapStore.activeTab == 'cyfcxm') {
    return '产业扶持项目';
  }
  if (mapStore.activeTab == 'xjzjxm') {
    return '衔接资金项目';
  }
};
const componentDia = computed(() => {
  if (mapStore.activeBtm == 'jyzt') {
    return JYZT;
  } else {
    if (mapStore.activeTab == 'cyfcxm') {
      return CYFC;
    } else {
      return CYFC;
    }
  }
});
const onClose = () => {
  mapStore.SetDia({ isDia: false });
};

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const $hbwlpc = (proxy as any)?.$hbwlpc;

const country = ref(useMapStore().szxcCountryText);

const statisticData = ref({});

const init = async () => {
  $hbwlpc.nyscQuery({ ssc: country.value }).then((res) => {
    statisticData.value = res.data || {};
  });
};

onMounted(() => {
  if (country.value) {
    init();
  }
});
</script>

<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.4s;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
:deep(.el-dialog) {
  // background: #2e79b0;
  // background: rgb(25 61 96);
  background: url('/images/popupBg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: white;
  .el-dialog__headerbtn > .el-dialog__close {
    color: white;
  }
  .el-dialog__header {
    display: contents;
    padding: 0px 15px;
  }
  .el-dialog__title {
    color: white;
  }
}

::v-deep .pagination-container {
  margin-top: auto !important;
}
::v-deep .el-pagination__total {
  color: #fff;
}
</style>
